﻿@model  List<FTBS.Models.Entities.Theater> 

@{
    ViewBag.Title = "Suất chiếu theo rạp";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var isFirstTimeLoad = (bool)ViewBag.IsFirstTimeLoad;
}
<body>
    <div style="margin-top: 4px; background-color: #4390df !important; height:40px">
        <button class="btn warning" style="width:90px; height:30px; padding-top: 0px; margin-top: 5px;  font-size: 12px;">
            @Html.ActionLink("Theo phim", "Index", "Schedule")
        </button>
        <button class="btn warning" style="width:90px; height:30px; padding-top: 0px; margin-top: 5px; font-size: 12px;">
            @Html.ActionLink("Theo rạp", "ScheduleTheater", "Schedule")
        </button>
    </div>

    <div style="overflow: auto; background-color: #4390df !important; margin-top:4px; height:45px">
        <div style="float: left; margin-left: 13px; overflow:auto; margin-top:4px">
            <img src="~/Image/Theater/HouseBlack.png"  style="width:30px; height:30px; float: left"/>
            <h2 style="color: black !important; font-weight: bold; float: left; margin-left:10px; font-size:20px; margin-top:2px">RẠP CHIẾU</h2>
        </div>
        <div style="float: left; margin-left: 220px; overflow:auto; margin-top:4px">
            <img src="~/Image/Theater/film_icon.png" style="width:30px; height:30px; float: left"/>
            <h2 style="color: black !important; font-weight: bold; float: left; margin-left:10px; font-size:20px; margin-top:2px">PHIM</h2>
        </div>
        <div style="float: left; margin-left: 260px; overflow:auto; margin-top:4px">
            <img src="~/Image/Theater/clock.png"  style="width:30px; height:30px; float: left"/>
            <h2 style="color: black !important; font-weight: bold; float: left; margin-left:10px; font-size:20px; margin-top:2px">GIỜ CHIẾU</h2>
        </div>
    </div>

    <div style="overflow: auto; background-color: white; margin-top: 4px; height: 480px;">
        <div style="float: left; height: 428px; width: 360px; overflow-x: auto; border-right:solid 1px #4390df">
            <div class="grid">
                @foreach (var theater in Model)
                {
                    <div class="row">
                        <div class="span5">
                            <div class="listview">
                                @if (Model.IndexOf(theater) == 0 && isFirstTimeLoad)
                                {
                                    <a href="#" class="list selected" id="theaterItem @theater.TheaterId"  onclick="ChangeType(@theater.TheaterId)">
                                        <div class="list-content" onclick="loadFilmByTheaterId(@theater.TheaterId)">
                                            <img src="~/Image/Theater/@theater.ImageURL" class="icon" />
                                            <div class="data">
                                                <span class="list-title" style="font-weight: bold; font-size: 12px">@theater.TheaterName</span>
                                                <span class="list-subtitle" style="font-size: 12px">@theater.Address</span>
                                            </div>
                                        </div>
                                    </a>
                                }
                                else
                                {
                                    <a href="#" class="list" id="theaterItem @theater.TheaterId"  onclick="ChangeType(@theater.TheaterId)">
                                        <div class="list-content" onclick="loadFilmByTheaterId(@theater.TheaterId)">
                                            <img src="~/Image/Theater/@theater.ImageURL" class="icon" />
                                            <div class="data">
                                                <span class="list-title" style="font-weight: bold; font-size: 12px">@theater.TheaterName</span>
                                                <span class="list-subtitle" style="font-size: 12px">@theater.Address</span>
                                            </div>
                                        </div>
                                    </a>
                                }
                                
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>

        <div style="float: left; height: 428px; width: 360px; overflow-x: auto; border-right:solid 1px #4390df">
            <div id="listFilmOfTheater">
                @Html.Partial("FilmsByTheater", (List<FTBS.Models.Entities.Film>)ViewBag.ListFilmOfFirstTheater)
            </div>
        </div>
        <div style="float: left; height: 428px; overflow-x: auto; margin-top:28px; margin-left:5px">
            <div id="listShowTimeOfFilm">
                @Html.Partial("ShowTimeOfFilm", (List<FTBS.Models.Entities.Concert.ShowTimeConcertEntity>)ViewBag.ListShowTimeOfFirstFilm)
            </div>
        </div>
    </div>
</body>

<script>
    function ChangeType(theaterId) {
        var idTag = "theaterItem" + " " + theaterId;
        document.getElementById(theaterId)
        var classValue = document.getElementById(idTag).getAttribute("class");
        
        if (classValue == "list selected") {
            document.getElementById(idTag).setAttribute("class", "list selected");
        }
        else {
            $("a[id^='theaterItem']").attr('class', 'list');
            document.getElementById(idTag).setAttribute("class", "list selected");
        }
    }
</script>
